/* 全局主题颜色 */
// 对应的操作主题的函数在 utils/theme.ts 中

/*
可以定义多个 :root 但不能完全相同，在全局切换样式时，只需要切换 root 根元素的属性即可。具体函数定义在 utils 包中的 theme.ts 中
*/

// 出于性能原因，更加推荐你在类名下添加自定义 css 变量，而不是在全局的 :root 下。
/* 明亮主题 */
.light-theme {
    --el-tag-bg-color: red;
}

:root [theme-color="light"] {
    --bg-color: #f0f2f5;
    --text-color: #000000;
}

/* 暗黑主题 */
:root [theme-color="dark"] {
    --bg-color: #000000;
    --text-color: #ffffff;
}


/* 主题切换过渡动画，持续两秒、延迟一秒，淡入淡出 */
/* 当 theme-color 属性的值发生变化时，将触发过渡效果。 */

.theme-transition {
    transition: theme-color 2s ease-in-out 1s;
}

/* 白色Glass */
.theme-glass-light {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    color: rgb(128, 128, 128);
}

/* 黑色Glass */
.theme-glass-dark {
    background-color: rgba(89, 89, 89, 0.5);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: rgba(14, 14, 14, 0.2) 0 6px 15px 0;
    -webkit-box-shadow: rgba(14, 14, 14, 0.2) 0 6px 15px 0;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    color: rgb(255, 255, 255);
}


.glass {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-light {
    /* 白色Glass */
    background-color: rgba(255, 255, 255, 0.5);
    color: rgb(128, 128, 128);
    box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
}

.glass-dark {
    /* 黑色Glass */
    background-color: rgba(89, 89, 89, 0.5);
    color: rgb(255, 255, 255);
    box-shadow: rgba(14, 14, 14, 0.2) 0 6px 15px 0;
    -webkit-box-shadow: rgba(14, 14, 14, 0.2) 0 6px 15px 0;
}